<template>
    <page class="detail" v-if="detailMovie">
        <page-header :showBack="true">【{{detailMovie.nm}}】详细信息</page-header>
        <div class="content">
            <b-scroll :pullDownRefresh="true" @pullingDown="refreshData">
                <div style="min-height:100vh">
                    <div class="movieInfo">
                        <img v-lazy="detailMovie.img.replace('w.h','128.180')" class="bgImg" alt="">
                        <div class="left">
                            <img @click.stop="showImage" v-lazy="detailMovie.img.replace('w.h','128.180')" alt="">
                            <span @click="isShowVideo=true" class="iconfont icon-bofang"></span>
                        </div>
                        <div class="center">
                            <div class="mn">{{detailMovie.nm}}</div>
                            <div class="en">{{detailMovie.enm}}</div>
                            <div class="sc">
                                <span>{{detailMovie.sc}}</span>
                                <span>({{detailMovie.snum}}人评)</span>
                            </div>
                            <div class="cat">{{detailMovie.cat}}</div>
                            <div class="src">{{detailMovie.src}}/{{detailMovie.dur}}分钟</div>
                            <div class="desc">{{detailMovie.pubDesc}}</div>
                        </div>
                        <div class="right">
                            <span class="icon-youjiantou iconfont"></span>
                        </div>
                    </div>
                    <div class="dra" :class="{hide:isHideDra==true}">
                        {{detailMovie.dra}}
                    </div>
                    <div class="slide" @click="isHideDra=!isHideDra">
                        <span class="iconfont icon-xiajiantou" v-if="isHideDra"></span>
                        <span class="iconfont icon-iconfonticontrianglecopy" v-if="!isHideDra"></span>
                    </div>
                </div>
            </b-scroll>
        </div>
        <div class="mask" v-if="isShowVideo" @click="isShowVideo=false">
            <video :src="detailMovie.vd" class="vd" @click.stop=""></video>
        </div>
    </page>
</template>
<script>
    import BScroll from "../components/BScroll.vue";
    export default {
        name: "detail",
        data() {
            return {
                id: null,
                detailMovie: null,
                isHideDra: true,
                isShowVideo:false
            }
        },
        components: {
            BScroll
        },
        created() {
            console.log("生命周期创建");
            this.id = this.$route.query.id;
            this.getMovieDetail(this.id);
        },
        methods: {
            getMovieDetail(id) {
                this.showLoading("正在加载");
                this.$http.get(`/maoyanApi/ajax/detailmovie?movieId=${id}`).then(res => {
                    this.detailMovie = res.data.detailMovie;
                    this.hideLoading();
                }).catch(err => {
                    console.log(err);
                    this.hideLoading();
                })
            },
            refreshData(scroll){
                this.getMovieDetail(this.id);
                //结束下拉刷新
                scroll.finishPullDown();
                scroll.refresh();
            },
			showImage(){
				var imgWidth=document.documentElement.clientWidth;
				var imgHeight=parseInt(imgWidth/128*180);
				this.showPreviewImage({
					urls:[this.detailMovie.img.replace("w.h",`${imgWidth}.${imgHeight}`)]
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";

    .detail {
        @include flexbox(column);

        .content {
            flex: 1;
            overflow: auto;

            .movieInfo {
                @include flexbox();
                position: relative;
                box-sizing: border-box;
                padding: .3rem;
                overflow: hidden;
                color: #ffffff;

                .bgImg {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    filter: blur(30px);
                }

                .left {
                    width: 110px;
                    height: 150px;
                    position: relative;
                    >img {
                        width: 100%;
                        height: 100%;
                        display: block;
                          
                    }
                    .iconfont{
                        font-size:0.6rem !important;
                        position: absolute;
                        right: 5px;
                        bottom:5px;
                    } 
                }

                .center {
                    flex: 1;
                    @include flexbox(column);
                    justify-content: space-between;
                    font-size: .24rem;
                    margin-left: .15rem;

                    >* {
                        font-size: inherit;
                    }

                    .mn {
                        font-size: .4rem;
                        font-weight: bold;

                    }

                    .en {
                        font-size: .24rem;
                    }

                    .sc {
                        span:first-child {
                            color: orange;
                            font-size: .36rem;
                        }

                        span:last-child {
                            font-size: .24rem;
                        }
                    }
                }

                .right {
                    width: 20px;
                    @include flexbox();
                    align-items: center;

                    .iconfont {
                        font-size: 16px;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .dra {
        box-sizing: border-box;
        padding: .3rem;
        text-indent: 2em;
        line-height: 1.5;
        color: #999999;
        overflow: hidden;

        &.hide {
            max-height: 4.2em;
        }
    }

    .slide {
        @include flexbox();
        justify-content: center;
        border-bottom: 1px solid #cccccc;

        .iconfont {
            font-size: .4rem !important;
        }
    }
    .mask{
        width:100vw;
        height:100vh;
        position:fixed;
        top:0px;
        left:0px;
        background-color: rgba(0,0,0,0.4);
        @include flexbox();
        justify-content: center;
        align-items: center;
        .vd{
            width:100%;
            height:auto;
            max-height: 100%;
        }
    }
</style>